vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3309

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3309

commit: ad68b69

Bundle size report

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	ad68b69
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69246a6c28aa9a0008c49271
😎 Deploy Preview	https://deploy-preview-3309--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

For some reason, I can't reproduce the original issue on Safari at all (26.1)

Moving the timing might not be the correct approach of solving the bug

It ends up breaking the transitions of the size of the popup, so doesn't seem so.

Popover.Viewport/Tooltip.Viewport have a different technique of solving size transitions, it's possible they don't have the bug, but I can't reproduce it it to begin with

It's possible handleOpenEvent needs reworking. From what I see locally it always "self-corrects" via the layout effect where handleValueChange(0, 0) is called (it seems not for you?), but handleOpenEvent gets called with 0 width/height initially.

Falling back may help:

  const handleValueChange = useStableCallback((currentWidth: number, currentHeight: number) => {
    if (!popupElement || !positionerElement) {
      return;
    }

    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupWidth);
    popupElement.style.removeProperty(NavigationMenuPopupCssVars.popupHeight);
    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerWidth);
    positionerElement.style.removeProperty(NavigationMenuPositionerCssVars.positionerHeight);

    const { width, height } = getCssDimensions(popupElement);
    const measuredWidth = width || prevSizeRef.current.width;
    const measuredHeight = height || prevSizeRef.current.height;

    if (currentHeight === 0 || currentWidth === 0) {
      currentWidth = measuredWidth;
      currentHeight = measuredHeight;
    }

    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${currentWidth}px`);
    popupElement.style.setProperty(NavigationMenuPopupCssVars.popupHeight, `${currentHeight}px`);
    positionerElement.style.setProperty(
      NavigationMenuPositionerCssVars.positionerWidth,
      `${measuredWidth}px`,
    );
    positionerElement.style.setProperty(
      NavigationMenuPositionerCssVars.positionerHeight,
      `${measuredHeight}px`,
    );

    sizeFrame1.request(() => {
      popupElement.style.setProperty(NavigationMenuPopupCssVars.popupWidth, `${measuredWidth}px`);
      popupElement.style.setProperty(
        NavigationMenuPopupCssVars.popupHeight,
        `${measuredHeight}px`,
      );

      sizeFrame2.request(() => {
        animationAbortControllerRef.current = new AbortController();
        runOnceAnimationsFinish(setAutoSizes, animationAbortControllerRef.current.signal);
      });
    });
  });

Or figuring out why the self-correction via the layout effect doesn't occur in your case

For some reason, I can't reproduce the original issue on Safari at all (26.1)

Sorry I forgot to add which version I'm experiencing the behavior at. I'm running the version before macOS 26. Seems to only be an issue on ~18.1.1 (20619.2.8.11.12) in that case!

Falling back may help

Tried to apply the above, it'll not fallback to anything with a size unfortunately. In the scope the width, currentWidth and prevSizeRef.current.width will all be set to zero in this Safari version.

Though, and if it makes sense to change, it'll self-correct if it wouldn't reset the prevSizeRef to DEFAULT_SIZE.

React.useEffect(() => {
    if (!open) {
      stickIfOpenTimeout.clear();
      sizeFrame1.cancel();
      sizeFrame2.cancel();
-     prevSizeRef.current = DEFAULT_SIZE;
    }
  }, [stickIfOpenTimeout, open, sizeFrame1, sizeFrame2]);

Seems like figuring out why popupElement yields a faulty width value in the version ~18 of Safari is wanted. I'm going to see if I can fish something out!

Try changing prevSizeRef to be set to the default on mounted=false instead of open=false? If it fixes it, that seems fine.

... to be set to the default on mounted=false

That does work!

Alright, nice! The other side effects still need to be done with open=false though, so an independent effect seems necessary.